<template>
<div class="showpage">
    <Head/>
{{amt}}
    <Goods
    v-for="item in list"
    :key="item.id"
    :title="item.title"
    :price="item.price"
    :state="item.checked"
    :count="item.count"
    :cid="item.id"
    @state-change="getState"
    />
    <button @click="show">111</button>
   <!-- 底部栏  -->
    <Footer 
    @all-state="getAllState"
    :allstate="res"
    :prices="amt"
    />
</div>
  
</template>

<script>
import Head from '../components/Header.vue'
import Footer from '../components/Footer.vue'
import Goods from '../components/Goods.vue'

import bus from '../components/bus'

export default {
    name: 'Car',
    components: {
        Head,
        Footer,
        Goods
    },
    created(){
        bus.$on('share',(val)=>{
            this.list.some( item =>{
                if(item.id===val.id){
                    item.count=val.count;
                    return true
                }
            })
        })
    },
    data:function(){
        return {
            list:[
                {id:1,title:'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',price:120,count:1,checked:false},
               {id:2,title:'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',price:190,count:1,checked:false},
               {id:3,title:'ccccccccccccccccccccccccccc',price:1220,count:1,checked:true},
               {id:4,title:'addddddddddddddddddddddddddddd',price:180,count:2,checked:true},
               {id:5,title:'aaeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',price:1320,count:1,checked:false},
               {id:6,title:'affffffffffffffffffffffffaaaaaa',price:320,count:2,checked:false},
               {id:7,title:'agggggggggggggggggggggggggggggggggaaaaaa',price:420,count:1,checked:false},
               {id:8,title:'ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhaa',price:620,count:1,checked:false},
            ]
        }
    },
    methods:{
        show(){
            console.log(this.list);
        },
        getState(val){
            console.log(val);
            this.list.some( item =>{
                if(item.id === val.id){
                    item.checked = val.value
                }
            })
        },
        getAllState(val){
            
            const allstate=val.state
            this.list.forEach(element => {
                element.checked=allstate
            });
            }
        },
    computed:{
        
        res(){
         return this.list.every(item => item.checked)
            },
        amt(){
            return this.list.filter( item=> item.checked ).reduce( (to,e)=>(to += e.count*e.price),0 )
        }
    }
}
</script>

<style>
    .showpage{
        padding-top: 70px;
        padding-bottom: 70px;
    }
  
</style>